30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF

Youtube 連結：https://www.youtube.com/watch?v=kXcncYPn5Ko

在這個系列影集中，我希望跟大家一起研究 Vite 的原始碼，希望通過閱讀 Vite 的原始碼更深入地了解 Vite 的工作原理，並且提升我們的 JavaScript 技能。

Pre-Bundling 的會在 createServer 程式運行之前發生，它將一些常用的依賴項提前打包成一個文件，以減少加載時間並提高性能。Vite 內部使用 esbuild 來實現這一目標。

Pre-Bundling 的主要工作發生在一個名為 createDepsOptimizer 的函數內部，這個函數的行數比較多，我們會分幾集來講解。

在這個函數內部，會檢查 MetaData 的內容並比對 Hash 值來決定是否需要重新進行 Pre-Bundling。除了 lockfile 之外，還有其他因素可以影響依賴項 Hash 的計算，比如運作的模式（例如開發模式或生產模式）、目錄以及一些其他設置。任何這些因素的變化都會導致 Hash 值的改變，從而觸發重新 Pre-Bundling。

getDepHash 函數的作用是通過計算多個因素的 Hash 值來確定是否需要重新 Pre-Bundling。這種機制可以有效地減少不必要的 re-bundle 操作。

JSON.stringify 是 JavaScript 中一個常用的方法，它用於將 JavaScript 物件轉換為 JSON 格式的字串。預設情況下，JSON.stringify 會忽略物件中的函數，而且對於正則表達式，它會將其轉換成一個看起來像物件的字串。這可能不是我們期望的行為，因為有些情況下，我們需要將這些函數和正則表達式保留在 JSON 字串中。

在下一集中，我們將繼續深入探討 Pre-Bundling 的過程，敬請期待！

若各位有其他關於 Vite 或前端開發的問題都歡迎提出。如果你喜歡我的頻道，歡迎幫我的影片按讚、訂閱、轉發我的影片，那對我會有很大的幫助，我們下集見！

參考資料：

• patch-package https://github.com/ds300/patch-package
• JSON.stringify https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify